<template>

  <popup :title="title" width="60%" confirmText="" ref="popupRef">

    <div v-loading="result.loading">
      <div>
        <el-button type="primary" @click="handleAdd">
          <template #icon>
            <el-icon>
              <Plus/>
            </el-icon>
          </template>
        </el-button>
      </div>

      <div class="mt-2">
        <el-table :data="result.list">
          <el-table-column prop="id" label="ID" width="85" align="center"/>
          <el-table-column prop="name" label="名称" min-width="150" align="center"/>
          <el-table-column prop="status" label="状态" min-width="150" align="center">
            <template #default="{ row }">
              <el-tag v-if="row.status === 0" type="success">正常</el-tag>
              <el-tag v-else-if="row.status === 1">停用</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="value" label="值" min-width="150" align="center"/>
          <el-table-column prop="create_time" label="创建时间" min-width="170" align="center"/>
          <el-table-column prop="update_time" label="修改时间" min-width="170" align="center"/>

          <el-table-column label="操作" min-width="150" align="center">
            <template #default="{ row }">
              <el-button type="primary" link @click="handleEdit(row)">
                编辑
              </el-button>
              <el-button type="danger" link @click="handleDelete(row.id)">
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>

    </div>
    <detail-edit-popup v-if="visible" v-model:visible="visible" ref="detailEditRef"
                       @success="handleSuccess"></detail-edit-popup>
  </popup>

</template>

<script setup>
import popup from '@/components/popup/index.vue'
import {Plus} from "@element-plus/icons-vue";
import {useList} from "@/hooks/useList";
import {list, edit, del} from '@/api/dictDetail'
import {nextTick, onMounted, reactive, ref, shallowRef} from "vue";
import detailEditPopup from './detailEdit.vue'
import feedback from '@/utils/feedback'


const title = ref('详情')
const detailEditRef = shallowRef(detailEditPopup)
const visible = ref(false)
const searchData = reactive({
  dict_code: '',
})
const {result, getList} = useList({
  apiFun: list,
  params: searchData
})

const handleAdd = async () => {
  visible.value = true
  await nextTick()
  await detailEditRef.value?.setFormData({dict_code: searchData.dict_code})
}

const handleEdit = async (row) => {
  visible.value = true
  await nextTick()
  row['dict_code'] = searchData.dict_code
  await detailEditRef.value?.setFormData(row, 'edit')
}

const handleDelete = async (id) => {
  await feedback.confirm('确认删除?')
  await del({ids: id})
  feedback.optionSuccess()
  getList()
}

const handleSuccess = async () => {
  visible.value = false
  getList()
  feedback.optionSuccess()
}


const setFormData = async (data = {}) => {
  searchData.dict_code = data['code']
  getList()
}

defineExpose({
  setFormData
})
</script>

<style scoped>

</style>